<template>
	<div>
		<div class="form-group">
			<label for="exampleInputEmail1">姓名</label>
			<input v-model="user.userName" type="text" class="form-control" id="exampleInputEmail1"
				aria-describedby="emailHelp">
		</div>
		<div class="form-group">
			<label for="exampleInputPassword1">密码</label>
			<input v-model="user.userPasw" type="password" class="form-control" id="exampleInputPassword1">
		</div>
		<div class="form-group">
			<label for="input1">邮箱</label>
			<input v-model="user.userEmil" type="email" class="form-control" aria-describedby="emailHelp" id="input1">
		</div>
		<div class="form-group">
			<label for="input2">手机号</label>
			<input v-model="user.userPhone" type="text" class="form-control" id="input2">
		</div>
		<button @click="register()" type="button" class="btn2 btn btn-primary">注册</button>
	</div>

</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = false;
			//onMounted()生命周期
			onMounted(() => {

			});
			const data = reactive({
				user: {
					userName: '',
					userPasw: '',
					userEmil: '',
					userPhone: ''
				},
				imgPath: store.state.imageUrl,
				register: () => {
					if (data.user.userName === '' || data.user.userPasw === '' || data.user.userEmil === '' ||
						data.user.userPhone === '') {
						alert('请输入完整信息')
						return
					}
					axios
						.post("Register", data.user)
						.then((response) => {
							if (response.data.code === 200) {
								data.user = response.data.data
								alert("请记下您的id：" + data.user.userId)
								router.push({
									name: 'Login',
									params: {
										id: data.user.userId
									}
								})
							}
						})
						.catch((error) => console.log(error)); // 请求失败处理
					// router.push({
					// 	name: 'Login',
					// 	params: {
					// 		id: 1234
					// 	}
					// })
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
